<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <%--<base href="<%=basePath%>"/>--%>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/address.js"></script>

</head>
<body onload='getProvince()'>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">修改用户信息</h3>
    <form action="${pageContext.request.contextPath}/consumer?method=modifyUser&currentPage=1&uid=${consumer.id}" method="post">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="username"  readonly="readonly" value="${consumer.username}" placeholder="请输入姓名" />
        </div>

        <div class="form-group">
            <label>性别：</label>
            <c:if test="${consumer.sexStr=='男'}">
            <input type="radio" name="sex" value="男" checked />男
            <input type="radio" name="sex" value="女"  />女
            </c:if>
            <c:if test="${consumer.sexStr=='女'}">
                <input type="radio" name="sex" value="男"  />男
                <input type="radio" name="sex" value="女" checked />女
            </c:if>
        </div>

        <div class="form-group">
            <label for="birth">生日：</label>
            <input type="date" class="form-control" id="birth"  name="birth" value="${consumer.birth}" />
        </div>

        <div class="form-group">
            <label for="phone">手机号：</label>
            <input type="text" id="phone" class="form-control" name="phone_num" value="${consumer.phone_num}" placeholder="请输入手机号码"/>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" id="email" class="form-control" name="email" value="${consumer.email}" placeholder="请输入邮箱地址"/>
        </div>

        <div class="form-group" style="margin-bottom: 20px">
            <label for="pro" style="float: left;">籍贯：</label>
            <select id="pro" class="form-control" style="float: left;width: 106px" name="province" onchange="chooseProvince(this)">
                <option value="1">请选择省</option>
            </select>
            <select id="city" class="form-control" style="float: left;width: 106px" name="city" onchange="chooseCity(this)">
                <option value="2">请选择市</option>
            </select>
            <select id="area" class="form-control" style="float: left;width: 106px" name="area">
                <option value="3">请选择区</option>
            </select>
        </div>

        <div class="form-group" style="text-align: center ;margin-top: 20px">
            <input class="btn btn-primary" type="submit" value="提交" />
            <input class="btn btn-default" type="reset" value="重置" />
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>
</div>
<script>
function address(options) {
this.pro = options.pro;
this.city = options.city;
this.area = options.area;
this.defaultPro = options.defaultPro || '北京市';
this.defaultCity = options.defaultCity || '北京市';
this.defaultArea = options.defaultArea || '东城区';
this.proList = [];
this.cityList = [];
this.areaList = [];
this.init();
}

address.prototype = {

init : function() {
var oThis = this;
this.initPro();
this.initCity();
if ( this.area ) {
this.initArea();
}
this.pro.onchange = function() {
oThis.changPro(oThis, this);
};
this.city.onchange = function() {
var index = this.selectedIndex;
oThis.changCity(oThis, this, index);
};
},

// 公共渲染
cal : function(oFrag, arr, list) {
arr.forEach(function( item, index, arrr ) {
var option = document.createElement("option");
option.innerHTML = item.name ?  item.name : item;
oFrag.appendChild(option);
});
list.appendChild(oFrag);
},

// 计算市数据
calCity : function( oThis, index2, index1 ) {
if ( oThis.isCentral() ) {
oThis.areaList = [];
provinceList[index2]['cityList'].forEach(function(item, index, arr) {
oThis.areaList.push(item.name);
});
} else {
oThis.areaList = oThis.cityList[index1]['areaList'];
}
},

// 判断是否是直辖市
isCentral : function() {
return this.cityList[0]['areaList'] == undefined
},

// 初始化省
initPro : function() {
var oFrag = document.createDocumentFragment();
this.proList = provinceList;
this.pro.innerHTML = '';
this.cal(oFrag, this.proList, this.pro);
this.pro.value = this.defaultPro;
},

// 市初始化
initCity : function() {
var index = this.pro.selectedIndex,
oThis = this,
oFrag = document.createDocumentFragment();
this.city.innerHTML = '';
this.cityList = provinceList[index]['cityList'];
if ( this.isCentral() ) {
this.cityList = [{
name : provinceList[index]['name'],
    // value :provinceList[index]['name']  /* 新加的修改*/
}];
}
this.cal(oFrag, this.cityList, this.city);
this.city.value = this.defaultCity;
},

// 初始化区
initArea : function() {
var index = this.pro.selectedIndex,
oThis = this,
oFrag = document.createDocumentFragment();
this.area.innerHTML = '';
this.calCity(oThis, index, 0);
this.cal(oFrag, this.areaList, this.area);
this.area.value = this.defaultArea;
},

// 改变省
changPro : function(oThis, that) {
var index =	oThis.pro.selectedIndex, // 选中索引
oFrag = document.createDocumentFragment();
oThis.city.innerHTML = '';
oThis.cityList = provinceList[index]['cityList'];
if ( oThis.isCentral() ) {
this.cityList = [{
name : provinceList[index]['name'],
    // value :provinceList[index]['name'], /* 新加的修改*/
}];
}
oThis.cal(oFrag, oThis.cityList, oThis.city);
if ( oThis.area ) {
this.changCity(oThis, that, 0, index);
}
},

// 改变市
changCity : function(oThis, that, index1, index2) {
var index = index ,// 选中索引
oFrag = document.createDocumentFragment();
oThis.calCity(oThis, index2, index1);
if ( oThis.area ) {
oThis.area.innerHTML = '';
oThis.cal(oFrag, oThis.areaList, oThis.area);
}
}
};

new address({
pro : document.querySelector('#pro'),
city : document.querySelector('#city'),
area : document.querySelector('#area'),
defaultPro : '浙江省',
defaultCity : '杭州市',
defaultArea : '淳安县',
});

new address({
pro : document.querySelector('#pro1'),
city : document.querySelector('#city1'),
});
</script>
</body>
</html>
